import "../../static/css/wrieoff/list.css"
import { Layout, Button, message, Input } from 'antd';
// 表格引入
import React, { useState, FC, useEffect } from 'react';
import { Table } from 'antd';
import type { TableRowSelection } from 'antd/lib/table/interface';
import type { ColumnsType } from 'antd/lib/table';
import { Switch } from 'antd';
import { useNavigate } from "react-router";

// 引入调接口
import { List, Del } from "../../apis/writeoff/list";
// 引入分页组件
import { Pagination } from 'antd';
import type { PaginationProps } from 'antd';

// 布局
const { Header, Content } = Layout;
// 约束
interface DataType {
   key: React.Key;
   reviewer_name: string;
   mobile: number;
   deparmentname: string;
   job: string;
   is_use: any;
}
interface IParams {
   page: number;
   pageSize: number;
   idorname?: any;
   mobile?: number;
}

const WrieoffList: FC = (): JSX.Element => {
   const columns: ColumnsType<DataType> = [
      {
         title: '核销人姓名',
         dataIndex: 'reviewer_name',
         width: '15%',
      },
      {
         title: '手机号',
         dataIndex: 'mobile',
         width: '15%',
      },
      {
         title: '部门',
         dataIndex: 'deparmentname',
         width: '15%',
      },
      {
         title: '职务',
         dataIndex: 'job',
         width: '15%',
      },
      {
         title: '是否启用',
         dataIndex: 'is_use',
         width: '15%',
         render: (text: any, value: any, index: any) => (
            <Switch defaultChecked={text === 1 ? true : false} />
         )
      },
      {
         title: '操作',
         dataIndex: 'id',
         width: '20%',
         render: (text: any, record: any) => (<div>
            <Button type="primary" size="small" className="upda" onClick={upda(text)}>修改</Button>
            <Button type="primary" size="small" onClick={del(text)} danger className="ant_btn">删除</Button>
         </div>)
      },
   ];
   // 修改数据
   const upda = (e: any) => {
      return () => {
         // console.log(e);
         navigate("/writeoff/WrieoffAdd", { state: e })
      }
   }
   // 删除
   const del = (id: any) => {
      return () => {
         Del({
            header: {
               Authorization: sessionStorage.getItem("token")
            },
            id: id
         }).then((res: any) => {
            if (res.code === '00000') {
               message.success('删除成功')
               lists()
            } else {
               message.error(res.msg)
            }
         })
      }
   }
   // 批量删除
   const delAll = () => {
      // console.log(selectedRowKeys);
      Del({
         id: selectedRowKeys
      }).then((res: any) => {
         if (res.code === '00000') {
            message.success('删除成功')
            lists()
         } else {
            message.error(res.msg)
         }
      })
   }
   const navigate = useNavigate()
   // 点击跳到添加页面
   const add = () => {
      navigate('/writeoff/WrieoffAdd')
   }
   // 获取批量数组
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
   const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
      setSelectedRowKeys(newSelectedRowKeys);
   };
   // 选中
   const rowSelection: TableRowSelection<DataType> = {
      selectedRowKeys,
      onChange: onSelectChange,
      selections: [
         Table.SELECTION_ALL,
         Table.SELECTION_INVERT,
         Table.SELECTION_NONE,
         {
            key: 'odd',
            text: 'Select Odd Row',
            onSelect: changableRowKeys => {
               let newSelectedRowKeys = [];
               newSelectedRowKeys = changableRowKeys.filter((_, index) => {
                  if (index % 2 !== 0) {
                     return false;
                  }
                  return true;
               });
               setSelectedRowKeys(newSelectedRowKeys);
            },
         },
         {
            key: 'even',
            text: 'Select Even Row',
            onSelect: changableRowKeys => {
               let newSelectedRowKeys = [];
               newSelectedRowKeys = changableRowKeys.filter((_, index) => {
                  if (index % 2 !== 0) {
                     return true;
                  }
                  return false;
               });
               setSelectedRowKeys(newSelectedRowKeys);
            },
         },
      ],
   };

   // 定义的数组接收数组值
   const [arrList, setarrList] = useState<any>()
   const [params, setParams] = useState<IParams>({ page: 1, pageSize: 10, })
   // 定义分页的总条数
   const [total, setTotal] = useState()
   const onShowSizeChange: PaginationProps['onShowSizeChange'] = (current, pageSize) => {
      // console.log(current, pageSize);
      setParams({ page: current, pageSize: pageSize })
   };
   // 调列表数据
   const lists = async () => {
      const res: any = await List({ ...params, idorname: change })
      // console.log(res);
      if (res.code === '00000') {
         setarrList(res.data)
         setTotal(res.total)
      }
   }
   // 内容改变事件
   const [change, setChange] = useState()
   const queryName = (e: any) => {
      // console.log(e.target.value);
      setChange(e.target.value)
   }

   // 查询
   const cha = () => {
      lists()
   }

   useEffect(() => {
      lists()
   }, [params])

   return (
      <div className="wriedooList">
         <Layout>
            <Header className="header">
               <div>
                  <Input placeholder="请输入核销人员的姓名" onChange={queryName} className="ant_input" />
                  <Button type="primary" size="small" onClick={cha} className="ant_btn">查询</Button>
                  <Button type="primary" size="small" className="upda" onClick={add}>添加</Button>
                  <Button type="primary" size="small" danger onClick={delAll} className="ant_btn">批量删除</Button>
               </div>
            </Header>
            <Content className="content">
               <Table pagination={false} className="table" bordered={true} rowSelection={rowSelection} columns={columns} dataSource={arrList} rowKey="id" />
               {/* 分页组件 */}
               <Pagination
                  showSizeChanger
                  onChange={onShowSizeChange}
                  total={total}
                  showTotal={total => `共${total}条`}
               />
            </Content>
         </Layout>
      </div>

   )
}
export default WrieoffList;
